<template>
	<div>
		<el-row class="header">
			<el-card shadow="hover" class="box-card">
				<i class="icon el-icon-message"></i>
				<div class="item">
					<div class="number">{{ towntalk_sh_count }}</div>
					<div class="text">待审核话题总数</div>
				</div>
			</el-card>
			<el-card shadow="hover" class="box-card">
				<i class="icon el-icon-chat-dot-square"></i>
				<div class="item">
					<div class="number">{{ towntalk_comment_sh_count }}</div>
					<div class="text">待审核话题评论总数</div>
				</div>
			</el-card>
			<el-card shadow="hover" class="box-card">
				<i class="icon el-icon-question"></i>
				<div class="item">
					<div class="number">{{ questions_sh_count }}</div>
					<div class="text">待审核问题总数</div>
				</div>
			</el-card>
			<el-card shadow="hover" class="box-card">
				<i class="icon el-icon-chat-square"></i>
				<div class="item">
					<div class="number">{{ questions_comment_sh_count }}</div>
					<div class="text">待审核问答评论总数</div>
				</div>
			</el-card>
			<el-card shadow="hover" class="box-card">
				<i class="icon el-icon-chat-dot-round"></i>
				<div class="item">
					<div class="number">{{ comment_count }}</div>
					<div class="text">留言总数</div>
				</div>
			</el-card>
		</el-row>
		<el-table class="table" :data="tableData" style="width: 100%; margin-top: 20px">
			<el-table-column prop="nickname" label="登录用户昵称" align="center"></el-table-column>
			<el-table-column prop="ip" label="我的登录IP" align="center"></el-table-column>
			<el-table-column prop="qcellcore" label="IP归属地" align="center"> </el-table-column>
			<el-table-column label="登录时间" align="center">
				<template slot-scope="scope">
					{{ scope.row.logintime | filterCreatetime }}
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import { getLoginLog } from '@/api/login';
import { GttowntalkList } from '@/api/towntalk';
import { getQuestions } from '@/api/questions';
import { getcommentList } from '@/api/comment';

export default {
	name: 'home',
	data() {
		return {
			tableData: [],
			towntalk_sh_count: 0,
			towntalk_comment_sh_count: 0,
			questions_sh_count: 0,
			questions_comment_sh_count: 0,
			comment_count: 0,
		};
	},
	props: {},
	components: {},
	created() {
		this.getLoginLog();

		this.GttowntalkList();
		this.get_ht_commentList();

		this.getQuestions();
		this.get_wd_commentList();

		this.getcommentList();
	},
	mounted() {},
	methods: {
		// 获取登录日志
		async getLoginLog() {
			this.tableData = await getLoginLog();
		},
		// 获取待审核话题总数
		async GttowntalkList() {
			const data = await GttowntalkList({ state: false });
			this.towntalk_sh_count = data.length;
		},
		// 获取待审核话题评论总数
		async get_ht_commentList() {
			const data = await getcommentList({ type: 'towntalk', state: false });
			this.towntalk_comment_sh_count = data.length;
		},

		// 获取待审核问答总数
		async getQuestions() {
			const data = await getQuestions({ state: false });
			this.questions_sh_count = data.length;
		},
		// 获取待审核问答评论总数
		async get_wd_commentList() {
			const data = await getcommentList({ type: 'questions', state: false });
			this.questions_comment_sh_count = data.length;
		},

		// 获取评论总数
		async getcommentList() {
			const data = await getcommentList();
			this.comment_count = data.length;
		},
	},
	computed: {},
	watch: {},
};
</script>

<style scoped>
.header {
	display: flex;
	justify-content: space-between;
}

.box-card {
	width: 245px;
    height: 120px;
}

::v-deep .el-card__body {
	display: flex;
    justify-content: space-around;
    align-items: center;
}

.el-row::after,
.el-row::before {
	display: none;
}

.number {
	text-align: center;
	font-size: 24px;
    margin-bottom: 10px;
}

.icon {
	padding-top: 15px;
	font-size: 50px;
}
.el-icon-message {
	color: #6bea7b;
}
.el-icon-chat-dot-square {
	color: #ff9816;
}
.el-icon-question {
	color: #f5cb67;
}
.el-icon-chat-square {
	color: #00defd;
}
.el-icon-chat-dot-round {
	color: #ff7742;
}
.text {
	text-align: center;
}
</style>
